<script lang="ts" setup>
import { ref, reactive, watch, onMounted,onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import PageCaontainer from '@/arco-components/PageContainer';
import { getCookie } from '@/utils/util';
import { Message, Modal } from '@arco-design/web-vue';
const loading = ref<boolean>(false);
const router = useRouter();

const state = reactive({
    iframeUrl: ''
});

setTimeout(()=>{
    state.iframeUrl = `/new-approval/#/create?access-token=${getCookie('access-token')}`;
}, 100)
// 返回
const handleBackTip = ( ) => {
  Modal.confirm({
    modalClass: 'model-message-confirm',
    title: '确定返回吗？',
    content: '返回后所填信息将被清空',
    simple: false,
    closable: true,
    okText: '确定',
    okButtonProps: {
      style: {
        backgroundColor: '#3C6EFF'
      }
    },
    onBeforeOk: (done) => {
      router.go(-1)
      done(true);
    }
  });
};
const commonFn = (e:any) => {
    console.log('新建保存message: ', e)
    if (e.data.type === 'arcoBuildSaveSuccess') {
        router.go(-1)
        console.log('build save success: ')
    }
}
const handleFunc = (e:any) => {
    commonFn(e)
}
onMounted(() => {
  console.log('build save mounted:')
  window.removeEventListener('message', handleFunc); 
  window.addEventListener('message', handleFunc)
})
onUnmounted(() => {
  console.log('build save unMounted:')
  window.removeEventListener('message', handleFunc); 
})
</script>

<template>
    <PageCaontainer show-back @back="handleBackTip">
        <a-card class="approval-center-card">
            <iframe
                id="iframeId"
                allowfullscreen="true"
                frameborder="0"
                width="100%"
                class="iframe-div"
                :src="state.iframeUrl"
            ></iframe>
        </a-card>
    </PageCaontainer>
</template>

<style lang="scss" scoped>

.iframe-div {
  height: 100%;
}

.approval-center-card {
    background: #f5f7fa;
    height: 100%;
    border: none;
    :deep(.arco-card-body) {
        padding: 0;
        height: 100%;
    }
}
</style>